/* 通知组件样式 */
.el-message {
  border-width: 0;
  border-radius: 8px;
  padding: 12px 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 300px;
  display: flex;
  align-items: center;
}

/* 成功类型通知 */
.el-message--success {
  background-color: rgba(103, 194, 58, 0.1);
  border-left: 4px solid #67C23A;
}

/* 错误类型通知 */
.el-message--error {
  background-color: rgba(245, 108, 108, 0.1);
  border-left: 4px solid #F56C6C;
}

/* 警告类型通知 */
.el-message--warning {
  background-color: rgba(230, 162, 60, 0.1);
  border-left: 4px solid #E6A23C;
}

/* 信息类型通知 */
.el-message--info {
  background-color: rgba(144, 147, 153, 0.1);
  border-left: 4px solid #909399;
}

/* 通知内容 */
.el-message__content {
  font-size: 14px;
  line-height: 1.5;
  padding: 0 10px;
  color: var(--text-color, #333);
}

/* 图标 */
.el-message .el-icon {
  font-size: 18px;
}

/* 关闭按钮 */
.el-message__closeBtn {
  font-size: 16px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.el-message__closeBtn:hover {
  opacity: 1;
}

/* 动画效果 */
.el-message-fade-enter-from,
.el-message-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.el-message-fade-enter-active,
.el-message-fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
} 